<template>
  <div class="container-full">
  <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <!-- <div class="col-xs-2 col-md-2" style="height:300px;background:red;">.col-xs-12 .col-md-8</div>
        <div class="col-xs-8 col-md-8" style="height:300px;background:yellowgreen;">.col-xs-6 .col-md-4</div> -->
         <div class="col-md-2 ksyd">
             <div class="ks_title">
                 快速预定
             </div>
             <div>

             </div>
         </div>
         <div class="col-md-10" style="height:300px;background:#bc8ebc;">
            <div class="form_top">
                <div class="form-group col-md-6 form_st">
                    <label>您的姓名:*</label>
                    <input type="email" class="form-control" id="" placeholder="">
                </div>
                <div class="form-group col-md-6 form_st">
                    <label>联系电话:*</label>
                    <input type="email" class="form-control" id="" placeholder="">
                </div>
            </div>
            <div class="form_top">
                <div class="form-group col-md-6 form_st">
                    <label>入住时间:*</label>
                    <!-- <div class='input-group date' id='datetimepicker1'>  
                        <input type='text' class="form-control" />  
                        <span class="input-group-addon">  
                            <span class="glyphicon glyphicon-calendar"></span>  
                        </span>  
                    </div> -->
                    <date-picker v-model="date" :config="config"></date-picker>
                </div>
                <div class="form-group col-md-6 form_st">
                    <label>选房时间:*</label>
                    <input type="email" class="form-control" id="" placeholder="">
                </div>
            </div>
            <div class="form_top">
                <button type="button" class="btn btn-default col-md-4 col-md-offset-4" style="background:#8f4290;border:0px;color:#fff;margin-top:20px">预定</button>
            </div>
         </div>
      </div>
    </div>
</div>
</template>
<script>
export default {
  data(){
      return{
          date: new Date(),
          config:{
              format: 'YYYY/MM/DD',
              useCurrent: false,
          }
      }
  }
}
</script>

<style scoped>
    .ksyd{
        height:300px;
        background:#f8f8f8;
        position:relative
    }
    .ksyd:after{
        content:'';
        width:0; 
        height:0; 
        border-top:10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #f8f8f8;
        z-index: 100;
        position:absolute;
        right:-10px;
        top:45%;
    }
    .ks_title{
        width:100px;
        margin:0 auto;
        margin-top:20px;
        font-size:20px;
        border:2px solid #cdcdcd;
        border-left:0px;
        border-right:0px;
    }
    .form_st{
        text-align:left;
        color:#fff
    }
    /* .form_st > input{
        height:42px;
    } */
    .form_top{
        margin-top:20px;
    }
</style>
